/*
 * @Author: zhangzhen
 * @Date: 2023-01-05 15:41:30
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-02-09 10:34:50
 *
 */
import React, {useState, useContext} from 'react';
import {Button, Popconfirm} from 'antd';
import {cloneDeep} from 'lodash';
import styles from './styles.module.scss';
import {FormContext} from '../../context';
import AddColumnsOption from './AddColumnsOption';

const AddColumns = () => {
    const {
        currentItem,
        setFormConTextValue,
        currentIndex,
        formConTextValue,
        setCurrentItem,
    } = useContext(FormContext);

    const [visible, setVisible] = useState(false);
    const [currentColumnsValue, setCurrentColumnsValue] = useState(null);
    const [currentColumnsIndex, setCurrentColumnsIndex] = useState<
        number | null
    >(null);

    // 删除列
    const deleteColumns = (index: number) => {
        const cloneValue = cloneDeep(formConTextValue);
        const cloneColumns = cloneDeep(cloneValue[currentIndex].columns);
        cloneColumns?.splice(index, 1);
        cloneValue[currentIndex].columns = cloneColumns;
        setFormConTextValue(cloneValue);
        setCurrentItem(cloneValue[currentIndex]);
    };
    // 设置列
    // const setColumns = (index: number, key: string, value: any) => {
    //     const cloneValue = cloneDeep(formConTextValue);
    //     const cloneColumns = cloneDeep(cloneValue[currentIndex].columns);
    //     if (cloneColumns) {
    //         cloneColumns[index][key] = value;
    //         cloneValue[currentIndex].columns = cloneColumns;
    //         setFormConTextValue(cloneValue);
    //         setCurrentItem(cloneValue[currentIndex]);
    //     }
    // };

    return (
        <div className={styles.addOptionBox}>
            <Button
                onClick={() => {
                    setVisible(true);
                    setCurrentColumnsValue(null);
                    setCurrentColumnsIndex(null);
                }}>
                新增一列
            </Button>
            {(currentItem.columns ?? []).map((item: any, index: number) => (
                <div
                    key={item.key}
                    style={{
                        display: 'flex',
                        marginTop: '3px',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                    }}>
                    <span>{item.title}</span>
                    <span>
                        {item.contentType === 'input' && '单行文本'}
                        {item.contentType === 'textarea' && '多行文本'}
                        {item.contentType === 'select' && '下拉菜单'}
                        {item.contentType === 'checkbox' && '多选'}
                    </span>
                    <Button
                        style={{marginLeft: '5px'}}
                        onClick={() => {
                            setVisible(true);
                            setCurrentColumnsValue(item);
                            setCurrentColumnsIndex(index);
                        }}>
                        配置
                    </Button>
                    <Popconfirm
                        title="确认要删除吗？"
                        placement="left"
                        onConfirm={() => {
                            deleteColumns(index);
                        }}
                        okText="是"
                        cancelText="否">
                        <Button style={{marginLeft: '5px'}}>删除</Button>
                    </Popconfirm>
                </div>
            ))}
            {/* Modal */}
            <AddColumnsOption
                visible={visible}
                setVisible={setVisible}
                currentColumnsValue={currentColumnsValue}
                currentColumnsIndex={currentColumnsIndex}
            />
        </div>
    );
};

export default AddColumns;
